Builds on top of the chat primitives from the previous PR to ship a fully-styled, batteries-included chat UI that works against an agents()-backed AppKit server with literally one line of JSX.

What's new

A new <ChatApp /> component in @databricks/appkit-ui/react/chat:

import { ChatApp } from "@databricks/appkit-ui/react/chat";

export function MyChat() {
  return (
    <div className="h-svh">
      <ChatApp />
    </div>
  );
}

That's the whole thing. No props, no callbacks, no slots. It defaults api to /api/agents/chat (the AppKit agents() plugin's default mount path), handles approval cards end-to-end (including POSTing the decision to /api/agents/approve), and renders a polished UI: greeting/empty state, message bubbles, reasoning panel, tool-call cards, markdown rendering, and a composer.

Demo

Tool approval

Reasoning

For people who outgrow the defaults, every section has a render* slot (renderMessage, renderToolCall, renderComposer) and you can override api, approveUrl, placeholder, etc.

Why

The previous PR gave us the building blocks (headless <Conversation>, <ChatInput>, hooks, transport) for people who want full control. But "full control" is overkill for the 80% case where you just want a chat that works. <ChatApp /> is the opinionated counterpart: zero-config for the default agents-plugin setup, with sensible escape hatches when you need them.

Playground

A new /agent-chat-full route showcases the no-config path: literally one <ChatApp /> tag in a sized container. Sits next to the existing /agent route (which stays as the build-your-own example).